<template>
  <div>
    <div class="g-card">
      <el-row type="flex" justify="space-between">
        <el-col :span="5" class="left g-pad20">
          <div class="title">
            <div class="title-name">
              <img
                style="margin-right: 2px"
                :src="require('@/assets/drainageCode/up-arrow.png')"
                alt=""
              />全部
            </div>
            <div class="title-btn" @click="addGroup">
              <img
                style="margin-right: 5px"
                :src="require('@/assets/drainageCode/plus-circle.png')"
                alt=""
              />添加
            </div>
          </div>
          <div class="item-list">
            <div
              class="item"
              :class="{ active: groupIndex == key }"
              v-for="(group, key) in groupList"
              :key="group.id"
              @click="switchGroup(key, group)"
            >
              <div class="name">{{ group.name }}</div>
              <el-dropdown
                v-if="groupIndex == key && group.flag === 0"
                class="dropdown"
                @command="onGroupCommand($event, group)"
              >
                <span class="dot">
                  <!-- <img :src="require('@/assets/drainageCode/more.png')" alt=""> -->
                  <i class="el-icon-more"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="edit">修改分组</el-dropdown-item>
                  <el-dropdown-item command="remove">删除分组</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>
        </el-col>
        <el-col :span="19" class="g-pad20">
          <div>
            <el-form :inline="true" label-width="80px" label-position="left">
              <el-form-item label="活码名称">
                <el-input
                  v-model="query.qrName"
                  placeholder="请输入活码名称"
                  clearable
                  @keyup.enter.native="search()"
                />
              </el-form-item>
              <el-form-item label="选择员工" prop="qrUserName">
                <el-input
                  :value="query.qrUserName"
                  readonly
                  @focus="dialogVisible = true"
                  placeholder="请选择员工"
                />
              </el-form-item>
              <el-form-item label-width="0">
                <!-- <el-button v-hasPermi="['wecom:code:list']" type="cyan" @click="getList(1)">查询</el-button> -->
                <el-button type="primary" @click="search()">查询</el-button>
                <el-button @click="resetQuery" type="info" plain
                  >清空</el-button
                >
              </el-form-item>
            </el-form>
            <div
              style="
                margin-top: 20px;
                display: flex;
                justify-content: space-between;
              "
            >
              <el-button type="primary" size="mini" @click="goRoute('staffAdd')"
                >新建员工活码</el-button
              >
              <div>
                <el-button
                  type="primary"
                  plain
                  size="mini"
                  @click="removeFn('mult')"
                  >删除</el-button
                >
                <el-button
                  type="primary"
                  plain
                  size="mini"
                  @click="downloadBatch()"
                  >批量下载</el-button
                >
              </div>
            </div>
          </div>
          <el-table
            v-loading="loading"
            :data="list"
            @selection-change="handleSelectionChange"
            style="width: 100%"
          >
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column
              label="二维码"
              align="center"
              prop="qrCode"
              min-width="120"
            >
              <template slot-scope="{ row }">
                <el-image
                  :src="row.qrCode"
                  fit="fit"
                  :preview-src-list="[row.qrCode]"
                  style="width: 100px; height: 100px"
                ></el-image>
              </template>
            </el-table-column>
            <el-table-column
              label="活码名称"
              align="center"
              min-width="100"
              prop="name"
              show-overflow-tooltip
            />
            <el-table-column
              label="活码分组"
              align="center"
              min-width="100"
              prop="qrGroupName"
              show-overflow-tooltip
            />
            <el-table-column
              label="使用员工"
              align="center"
              min-width="140"
              prop="qrUserInfos"
              show-overflow-tooltip
            >
              <template slot-scope="{ row }">
                <!-- <template v-if="row.status === 1">
                  <template v-for="(data, key) in row.weEmpleCodeUseScops" >
                    <span :key="key">{{data.businessName}}</span>  <span :key="key" v-if="key >0">','</span>
                  </template>
                </template> -->
                <template>
                  <div
                    v-for="(unit, key) in row.qrUserInfos"
                    :key="key"
                    style="display: inline"
                  >
                    <template v-for="(item, index) in unit.weQrUserList">
                      <span :key="index">{{ item.userName + " " }}</span>
                    </template>
                  </div>
                </template>
              </template>
            </el-table-column>
            <el-table-column
              label="标签"
              align="center"
              prop="qrTags"
              min-width="160px"
            >
              <template slot-scope="{ row }">
                <div>
                  <template v-for="(data, key) in row.qrTags">
                    <el-tag
                      v-if="key < 2 && data.tagName"
                      :key="key"
                      size="mini"
                      >{{ data.tagName }}</el-tag
                    >
                  </template>
                  <el-popover trigger="hover" width="200">
                    <template v-for="(unit, index) in row.qrTags">
                      <el-tag
                        :key="index"
                        v-if="index > 1 && unit.tagName"
                        size="mini"
                      >
                        {{ unit.tagName }}</el-tag
                      >
                    </template>
                    <div style="display: inline" slot="reference">
                      <el-tag v-if="row.qrTags.length > 2" size="mini"
                        >...</el-tag
                      >
                    </div>
                  </el-popover>
                </div>
              </template>
            </el-table-column>
            <!-- <el-table-column label="最近更新时间" align="center" prop="updateTime" width="180">
            </el-table-column> -->
            <el-table-column
              label="最近更新时间"
              align="center"
              prop="updateTime"
              width="180"
            >
            </el-table-column>
            <el-table-column
              label="操作"
              align="center"
              fixed="right"
              width="180"
              class-name="small-padding fixed-width"
            >
              <template slot-scope="{ row }">
                <!-- <el-button type="text" @click="download(row.id, row.useUserName, row.scenario)" v-hasPermi="['wecom:code:download']">下载</el-button>
                  <el-button type="text" class="copy-btn" :data-clipboard-text="row.qrCode" v-hasPermi="['monitor:operlog:query']">复制链接</el-button>
                  <el-button type="text" @click="goRoute('staffDetail', row.id)" v-hasPermi="['drainageCode:staff:detail']">查看详情</el-button>
                  <el-button type="text" @click="goRoute('staffAdd', row.id)" v-hasPermi="['wecom:code:edit']">编辑</el-button>
                  <el-button type="text" @click="remove(row.id)" v-hasPermi="['wecom:code:remove']">删除</el-button> -->
                <el-button type="text" @click="goRoute('staffDetail', row.id)"
                  >详情|统计</el-button
                >
                <el-divider direction="vertical"></el-divider>
                <el-button type="text" @click="goRoute('staffAdd', row.id)"
                  >编辑</el-button
                >
                <el-divider direction="vertical"></el-divider>
                <el-dropdown style="margin-left: 10px">
                  <el-button type="text">
                    <i class="el-icon-more"></i>
                  </el-button>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>
                      <el-button
                        type="text"
                        @click="download(row.id, row.qrGroupName, row.name)"
                        >下载</el-button
                      >
                    </el-dropdown-item>
                    <el-dropdown-item>
                      <el-button type="text" @click="removeFn('single', row.id)"
                        >删除</el-button
                      >
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </div>

    <!-- 批量新建弹窗 -->
    <SelectUser
      :visible.sync="dialogVisible"
      title="组织架构"
      :defaultValues="userArray"
      @success="getSelectUser"
    ></SelectUser>

    <el-dialog
      :title="`${groupForm.id ? '修改' : '新建'}分组`"
      :visible.sync="groupVisible"
      width="30%"
    >
      <el-form :model="groupForm" :rules="rules" ref="groupForm">
        <el-form-item label="分组名称" prop="name" label-width="80px">
          <el-input
            v-model="groupForm.name"
            clearable
            autocomplete="off"
            maxlength="15"
            show-word-limit
          >
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="groupVisible = false">取 消</el-button>
        <el-button type="primary" @click="onAddOrUpdateGroup">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getList,
  remove,
  downloadBatch,
  getCodeCategoryList,
  addCodeCategory,
  updateCodeCategory,
  removeCodeCategory,
} from "@/api/drainageCode/staff";
import SelectUser from "@/components/SelectUser";
// import ClipboardJS from 'clipboard'
export default {
  name: "CodeStaff",
  components: {
    SelectUser,
  },
  data() {
    return {
      // 查询参数
      query: {
        pageNum: 1,
        pageSize: 10,
        groupId: "",
        qrName: "", // 活码名称
        qrUserName: undefined,
        orderByColumn: "wqc.update_time",
        isAsc: "desc",
      },
      userArray: [], // 选择人员
      userArrayStr: "",
      dialogVisible: false,
      // 遮罩层
      loading: false,
      // 选中数组
      ids: [],
      // 总条数
      total: 0,
      // 表格数据
      list: [],
      // 问卷参数
      form: {
        codeType: 3,
        qrcode: "",
        isJoinConfirmFriends: 0,
        weEmpleCodeTags: [],
        weEmpleCodeUseScops: [],
      },
      groupList: [],
      groupVisible: false,
      groupForm: {
        mediaType: 6,
        name: "",
      },
      rules: {
        name: [
          {
            required: true,
            message: "请输入分组名称",
            trigger: "blur",
          },
          {
            min: 1,
            max: 15,
            message: "长度在 1 到 15 个字符",
            trigger: "blur",
          },
        ],
      },
      groupIndex: 0,
    };
  },
  created() {
    this.getCodeCategoryListFn();
    this.$store.dispatch(
      "app/setBusininessDesc",
      `
        <div>支持单人、批量单人及多人方式新建员工活码，客户可以通过扫描员工活码添加员工为好友，并支持自动给客户打标签和发送欢迎语。</div>
      `
    );
  },
  mounted() {
    // var clipboard = new ClipboardJS('.copy-btn')
    // clipboard.on('success', (e) => {
    //   this.$notify({
    //     title: '成功',
    //     message: '链接已复制到剪切板，可粘贴。',
    //     type: 'success'
    //   })
    // })
    // clipboard.on('error', (e) => {
    //   this.$message.error('链接复制失败')
    // })
  },
  methods: {
    addGroup() {
      this.groupForm = {
        mediaType: 6,
        name: "",
      };
      this.groupVisible = true;
    },
    getCodeCategoryListFn() {
      getCodeCategoryList({ mediaType: 6 }).then((res) => {
        if (res.code == 200) {
          this.groupList = res.data;
          this.query.groupId = this.groupList[0].id;
          this.groupIndex = 0;
          this.query.pageNum = 1;
          this.getList();
        }
      });
    },
    switchGroup(index, data) {
      this.groupIndex = index;
      this.query.groupId = data.id;
      this.search();
    },
    getSelectUser(data) {
      this.userArray = data;
      this.query.qrUserName = this.userArray
        .map(function (obj, index) {
          return obj.name;
        })
        .join(",");
    },
    search() {
      this.query.pageNum = 1;
      this.getList();
    },
    getList() {
      this.loading = true;
      getList(this.query)
        .then(({ rows, total }) => {
          this.list = rows;
          this.total = Number(total);
          this.loading = false;
          this.ids = [];
        })
        .catch(() => {
          this.loading = false;
        });
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.query.qrName = "";
      this.userArray = [];
      this.query.qrUserName = "";
      // this.query.userArrayStr = ''
      this.search();
    },
    goRoute(path, id) {
      this.$router.push({
        path: path,
        query: { id, groupId: this.query.groupId },
      });
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
    },
    /** 删除按钮操作 */
    removeFn(type, id) {
      if (type === "mult" && !this.ids.length) {
        this.msgInfo("请选择要删除项！");
        return;
      }
      const ids = id || this.ids.join(",");
      this.$confirm("是否确认删除?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          return remove(ids);
        })
        .then(() => {
          this.search();
          this.msgSuccess("删除成功");
        })
        .catch(function () {});
    },
    download(id, userName, qrName) {
      let name = userName + "-" + qrName + ".png";
      downloadBatch(id).then((res) => {
        if (res != null) {
          let blob = new Blob([res], {
            type: "application/zip",
          });
          let url = window.URL.createObjectURL(blob);
          const link = document.createElement("a"); // 创建a标签
          link.href = url;
          link.download = name; // 重命名文件
          link.click();
          URL.revokeObjectURL(url); // 释放内存
        }
      });
    },
    /** 下载 */
    downloadBatch(qrCode) {
      if (!this.ids.length) {
        this.msgInfo("请先勾选下载项！");
        return;
      }
      this.$confirm("是否确认下载所有图片吗?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          return downloadBatch(this.ids.join(","));
        })
        .then((res) => {
          if (res != null) {
            let blob = new Blob([res], {
              type: "application/zip",
            });
            let url = window.URL.createObjectURL(blob);
            const link = document.createElement("a"); // 创建a标签
            link.href = url;
            link.download = "批量员工活码.zip"; // 重命名文件
            link.click();
            URL.revokeObjectURL(url); // 释放内存
          }
        })
        .catch(function () {});
    },
    // 新增分组
    onAddOrUpdateGroup() {
      this.$refs.groupForm.validate((validate) => {
        console.log(this.groupForm);
        if (this.groupForm.id) {
          let obj = {
            id: this.groupForm.id,
            name: this.groupForm.name,
            mediaType: 6,
          };
          this.groupForm = obj;
        }
        if (validate) {
          (this.groupForm.id ? updateCodeCategory : addCodeCategory)(
            this.groupForm
          ).then((res) => {
            this.groupVisible = false;
            this.groupForm = {
              name: "",
              mediaType: 6,
            };
            this.$refs.groupForm.clearValidate();
            this.getCodeCategoryListFn();
          });
        }
      });
    },
    onGroupCommand(e, group) {
      console.log(e,group);
      if (group.id === "1") {
        this.msgInfo("默认分组不可操作！");
        return;
      }
      if (e == "edit") {
        this.editGroup(group);
      } else if (e == "remove") {
        this.removeGroup(group.id);
      }
    },
    editGroup(group) {
      console.log("0331213231",group);
      this.groupForm = JSON.parse(JSON.stringify(group));
      this.groupVisible = true;
    },
    removeGroup(id) {
      this.$confirm(
        "确认删除当前分组? 删除后其下活码将移至默认分组！",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          removeCodeCategory(id).then((res) => {
            this.getCodeCategoryListFn();
          });
        })
        .catch(() => {});
    },
  },
};
</script>

<style>
.el-dialog {
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /*height:600px;*/
  max-height: calc(100% - 30px);
  max-width: calc(100% - 30px);
}

.el-dialog .el-dialog__body {
  flex: 1;
  overflow: auto;
}
</style>
<style lang="scss" scoped>
.bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.my-divider {
  display: block;
  height: 1px;
  width: 100%;
  background-color: #dcdfe6;
}
.hover-item {
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #3c88f0;
  padding: 6px 15px;
  cursor: pointer;

  &:hover {
    background-color: #f5f8fe;
  }
}

.left {
  border-right: 1px solid #f1f1f1;
  .title {
    color: #3c88f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    // padding-right: 20px;

    .title-name {
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #333333;
      display: flex;
      align-items: center;
    }

    .title-btn {
      cursor: pointer;
      display: flex;
      align-items: center;
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #3c88f0;

      &:hover {
        opacity: 0.8;
      }
    }
  }

  .item-list {
    max-height: 800px;
    padding-top: 15px;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;

    .item {
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 12px;
      color: #333333;
      height: 40px;
      line-height: 40px;
      width: 100%;
      padding-left: 20px;

      .name {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      .dropdown {
        // display: none;
        .dot {
          cursor: pointer;
          width: 14px;
          height: 14px;
          line-height: 14px;
          font-size: 14px;
          font-family: JMT-Font, JMT;
          font-weight: normal;
          color: #3c88f0;
          margin-right: 20px;
          margin-left: 5px;
        }
      }

      &:hover {
        color: #3c88f0;
        background: #f5f8fe;
        opacity: 0.8;

        .dropdown {
          // display: block;
        }
      }
    }

    .active {
      // border-left: 2px solid #3c88f0;
      color: #3c88f0;
      background: #f5f8fe;
    }
  }
}
</style>
